<template>
  <div class="phone_div">
    <div class="phone_con" :style="setPhone()">
      <!-- <div class="phone_title" v-html="getTitle()"></div> -->
      <div class="phone_screen" :style="setBgStyle(currentPageBg)">
        <div class="j_screen">

          <ul :style="getPhoneUl()">
            <li v-for="(item,index) in currentPageData" @mousedown="selectItemOp(index,item,$event)" :id="item.id"
                :style="setOutStyle(item.out.css,item.type)" :class="['item_wrapper', item.class]"
                :type="item.type" :index="index" style="position: absolute;">

              <div class="content" style="-webkit-animation-play-state:paused;">
              <!--<div class="content" :style="setNewAni(item.anim)" style="-webkit-animation-play-state:paused;">-->

                <!-- 图片 -->
                <img v-if="item.type==4" :src="item.src" :style="setOutStyle(item.in.css,item.type)"
                     @click="itemClick(4)"/>

                <!-- 文字  -->
                <div v-if="item.type==2 || item.type==5 "
                     v-html="setContent(item.content)"
                     :style="setOutStyle(item.in.css,item.type)" @click="itemClick(25)" ref="text"></div>

                <!-- svg  -->
                <div :class="'svg2_'+ index + '_' + currentPage" data-flag="0" v-if="item.type=='h'" class="svg2"
                     v-html="loadSvg(item,index + '_' + currentPage)"
                     style="width: 100%; height: 100%; position: relative;" @click="itemClick('h')"></div>

                <!-- 电话  -->
                <a v-if="item.type=='phoneCallButton'" :style="setOutStyle(item.in.css,item.type)"
                   style="text-align: center" @click="itemClick('phoneCallButton')"
                   class="fa fa-phone">&nbsp;&nbsp;{{item.content}}</a>

                <!-- 网址  -->
                <a v-if="item.type=='linkButton'" :style="setOutStyle(item.in.css,item.type)" class="fa fa-link"
                   @click="itemClick('linkButton')">&nbsp;&nbsp;{{item.content}}</a>

                <!-- 点赞  -->
                <a v-if="item.type=='interActionButton'" :style="setOutStyle(item.in.css,item.type)"
                   @click="itemClick('interActionButton')" class="fa fa-thumbs-up">&nbsp;&nbsp;{{item.content}}</a>

                <img v-if="item.type==='m'" @dblclick="itemClick('m')" title="双击可修改地址"
                     :src="'http://api.map.baidu.com/staticimage/v2?ak=WtfAdHwd1tMOCf2dzdRIhNZkSq8V7o5W&width=600&height=300&dpiType=ph&markers='+item.in.properties.address+'|'+item.in.properties.lng+','+item.in.properties.lat+'&markerStyles=l,,0xff0000&center='+item.in.properties.address+'&labels='+item.in.properties.address+'|'+item.in.properties.lng+','+item.in.properties.lat+'&zoom=17&labelStyles=我在这,1,28,0xffffff,0x1abd9b,1'"/>

                <!--<img v-if="item.type==='m'" :src="'http://api.map.baidu.com/staticimage/v2?ak=WtfAdHwd1tMOCf2dzdRIhNZkSq8V7o5W&center='+item.in.properties.lng+','+item.in.properties.lat+'&markers='+item.in.properties.address+'|'+item.in.properties.lng+','+item.in.properties.lat+'&markerStyles=l,A,0xff0000&zoom=18'"/>-->


                <!-- 地图  -->
                <!--<div :id="'maps1'+currentPage+'k'" v-if="item.type==='m'" style="width:100%;height:100%" data-flag="0"-->
                <!--:style="loadBaiDuMap(item.in.properties,'maps1'+currentPage+'k')"></div>-->

                <!-- 倒计时  -->
                <count-down v-if="item.type=='countDown'" v-on:start_callback="countDownS_cb(1)"
                            v-on:end_callback="countDownE_cb(1)" :startTime="new Date().getTime()"
                            :endText="item.in.properties.endtip" :endTime="parseInt(item.in.properties.deadlineTime)"
                            :item="item" @countDownClick="itemClick('countDown')"></count-down>

                <!-- input框  -->
                <div v-if="item.type=='i'" style="position:relative">

                  <input :style="setOutStyle(item.in.css,item.type)"
                         style="position:absolute" @click="itemClick('i')" v-on:focus="inputfocus" v-on:blur="inputblur"
                         readonly="true">
                  <!-- <span style="position:absolute;top:5px;right:5px;font-size:40px;color:red;"> * </span> -->
                  <span :style="setSpanStyle(item.in.css)"
                        style="position: relative;pointer-events: none; opacity: 0.7;padding-left:20px;">{{ item.in.properties.placeholder
                    }}</span>
                  <span :style="setSpanStyle(item.in.css)" v-if=" item.in.properties.require=='1' "
                        style="position: relative;pointer-events: none; color:red;">*</span>
                </div>

                <!-- submit  -->
                <div v-if="item.type=='s'" :style="setOutStyle(item.in.css,item.type)" @click="itemClick('s')">
                  {{item.in.properties.str}}
                </div>

              </div>
              <div class="edit_mode_cont" v-if="checkedItems[0]==index">
                <div class="edit_mode_layer">
                  <div class="edit_mode edit_mode_radius_t_l"></div>
                  <div class="edit_mode edit_mode_radius_t_m"></div>
                  <div class="edit_mode edit_mode_radius_t_r"></div>
                  <div class="edit_mode edit_mode_radius_m_r"></div>
                  <div class="edit_mode edit_mode_radius_b_r"></div>
                  <div class="edit_mode edit_mode_radius_b_m"></div>
                  <div class="edit_mode edit_mode_radius_b_l"></div>
                  <div class="edit_mode edit_mode_radius_m_l"></div>
                </div>
              </div>
            </li>
            <div class="zgwsj pa"></div>
          </ul>
        </div>
        <div :class="{'grid_bg': bgGridStatus}" v-show="bgGridStatus" style="width:0;height:0;">

          <div class="grid-row" style="position:absolute;top:0;left:0;width:0;height:0;">
            <template v-for="n in 250">
              <div class="row-line" :style="set_grid_bg()">

              </div>
            </template>
          </div>
          <div class="grid-col" style="position:absolute;top:0;left:0;width:0;height:0;" >
            <template v-for="n in 220">
              <div class="col-line" :style="setColLineLeft(n)">

              </div>
            </template>
          </div>
        </div>
      </div>
      <ul id="item_context_menu" class="context_menu" style="display: none;">
        <li @click="CopyItem()">复制</li>
        <li @click="UpItem()">上移</li>
        <li @click="DownItem()">下移</li>
        <li @click="StickieItem()">置顶</li>
        <li @click="BottomItem()">置底</li>
        <li @click="Del()">删除</li>
      </ul>
      <!-- <alert></alert>
      <ul class="phone_subbar">
        <el-tooltip class="item" effect="dark" content="撤销" placement="right">
          <li @click="undo"></li>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="恢复" placement="right">
          <li @click="redo"></li>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="right">
          <li @click="reload"></li>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="特效" placement="right">
        <li></li>
        </el-tooltip>
         <el-tooltip class="item" effect="dark" content="网格" placement="right">
          <li @click="changeBgGridStatus"></li>
        </el-tooltip>
      </ul> -->
    </div>
    <Modal
      v-model="showModal"
      title="提示"
      @on-ok="DelPage"
      width="300">
      <p>建议您先将数据导出后再删除！删除字段将导致该字段收集到的数据被清空，且不可恢复，确认删除吗？</p>
    </Modal>
    <div v-if="showmap">
      <selectmap :showmap="showmap" @close="closeMap" :option="mapOption"></selectmap>
    </div>

    <div class="phone_bili">
      <div class="phone_subbar1" @click="changeBgGridStatus"><span></span></div>
      <div class="min_wrap" @click="changePhone(1)"><span></span></div>
      <div class="num_wrap" id="phonebiliPhoneval" :data-bili="phonebili.phoneUl">{{phonebili.phoneval}}%</div>
      <div class="add_wrap" @click="changePhone(2)"><span></span><span></span></div>
    </div>
  </div>

  
</template>

<script>
  var checkIndex;
  import {mapActions, mapGetters} from 'vuex'
  import alert from '@/components/common/Alert'
  import CountDown from '@/components/common/vue2-countdown'
  import Util from '../Util/index.js'
  import selectmap from './common/SelectMap'
  // require('../Util/jquery-popline.js')

  export default {
    components: {
      alert,
      CountDown,
      selectmap
    },
    computed: {
      ...mapGetters([
        "title",
        "currentPageData",
        "currentPageMain",
        "checkedItems",
        "alertObj",
        "checkedItemData",
        "currentPageBg",
        "sceneInfo",
        "rightTabIndex",
        "currentPage",
      ]),
    },
    data() {
      return {
        baseUrl: "http://res.yaoyue365.com/",
        animation: "animation:",
        map: null,
        bgGridStatus: false,
        testIndex: 0,
        inputID: 0,
        time: '',
        flag: false,
        svgCount: 0,
        itemIndex: 0,
        showModal: false,
        showmap: false,
        mapOption: 'update',
        phonebili :{'phoneWidth':360,'phoneHeight':640,'phoneUl':0.5,'phoneval':50}
      }
    },
    watch: {
      rightTabIndex: function (newRightTabIndex) {
        // debugger
        var self = this;
        if (newRightTabIndex == 1) {

          // self.$store.dispatch('addText');
        }
      },
      checkedItems: function (index) {
        if (index.length != 0) {
          checkIndex = index[0];
        }
        return this.checkedItems[0] = checkIndex;
      }
    },
    methods: {
      ...mapActions({

        //Del: 'delItem',
        CopyItem: 'copySelectItem',
        UpItem: 'upSelectItem',
        DownItem: 'downSelectItem',
        StickieItem: 'stickieSelectItem',
        BottomItem: 'bottomSelectItem',
        PastItem: 'pasteItem'


      }),
      setColLineLeft(n){
        var s = "position:absolute;height:"+this.phonebili.phoneHeight+"px; border-left:1px dashed #999;left : " + (n * 10) + "px;"
        return s
      },
      set_grid_bg(){
        return "width:"+this.phonebili.phoneWidth+"px;margin-bottom:10px;border-bottom:1px dashed #999;";
      },
      setContent(data){
//        var size = data.lastIndexOf('">');
//        if (size > 0) {
////          data= data.substring(size+2, data.length);
//          data= data.replace(/<[^>]+>/g,"");//去掉所有的html标记
//        }
        return data;
      },
      getTitle(){
        return this.sceneInfo.name;
      },
      keepLastIndex(obj) {
        if (window.getSelection) {//ie11 10 9 ff safari
          obj.focus(); //解决ff不获取焦点无法定位问题
          var range = window.getSelection();//创建range
//          range.selectAllChildren(obj);//range 选择obj下所有子内容
          range.collapseToEnd();//光标移至最后
        }
        else if (document.selection) {//ie10 9 8 7 6 5
          var range = document.selection.createRange();//创建选择对象
          //var range = document.body.createTextRange();
          range.moveToElementText(obj);//range定位到obj
          range.collapse(false);//光标移至最后
          range.select();
        }
      },
      countDownS_cb(){
        // console.log("countDownS_cb")
      },
      countDownE_cb(){
        // console.log("countDownE_cb")
      },
      inputfocus(ev){
        // debugger
        // this.inputID = item.id;
//        $(ev.target).nextAll('span').hide()

      },
      inputblur(ev){

//        if ($(ev.target).val() == "") {
//
//          $(ev.target).nextAll('span').show()
//        } else {
//
//          $(ev.target).nextAll('span').hide()
//        }
      },
      setSpanStyle(inCssObj){

        var styles = "";

        for (var item in inCssObj) {

          var value = inCssObj[item];
          if (item === "height") {
            styles += item + ":" + value + "px" + ";";
          } else if (item === "lineHeight" || item === "fontSize" || item === "color") {
            styles += item + ":" + value + ";";
          }
        }

        // console.log(styles+"ss")
        return styles;

      },
      setInputStyle(inputStyle, properties){

        var styles = "";

        for (var item in inputStyle) {

          var value = inputStyle[item];

          if (item === "height"
            || item === "borderRadius" || item === "fontSize" || item === "lineHeight") {

            styles += item + ":" + value + "px" + ";";


          } else if (item === "color") {

            styles += item + ":" + properties.textColor + ";";

          } else if (item === "border") {

            styles += item + ":" + value + "px solid " + properties.btnColor + ";";
            // styles += item + ":"  +"1px soild #f6" + properties.btnColor + ";";

          } else if (item === "background") {

            styles += item + ":" + value + ";";
            // styles += item + ":"  +"1px soild #f6" + properties.btnColor + ";";

          } else if (item === "padding") {

            // styles +=item + ":" + submitStyle.btnColor + ";";
            continue
          } else if (item === "top") {

            // styles +=item + ":" + submitStyle.btnColor + ";";
            continue
          } else {

            // styles +=item + ":" + value + ";";
          }


        }
        // console.log(styles)
        return styles;

      },
      setSubmitStyle(submitStyle){

        var styles = "";

        for (var item in submitStyle.submit) {

          var value = submitStyle.submit[item];

          if (item === "top" || item === "height"
            || item === "borderRadius" || item === "fontSize" || item === "lineHeight") {

            styles += item + ":" + value + "px" + ";";


          } else if (item === "background") {

            styles += item + ":" + submitStyle.btnColor + ";";

          } else if (item === "padding") {

            // styles +=item + ":" + submitStyle.btnColor + ";";
            continue
          } else {

            styles += item + ":" + value + ";";
          }


        }
        return styles;

      },
      Del(){
        if (this.checkedItemData.type == 'i' || this.checkedItemData.type == "s") {
          this.showModal = true;
        } else {
          this.DelPage();
        }
      },
      //删除表单
      DelPage(){
        this.$store.dispatch('delItem')
      },
      setPhone(){
        return "width: "+this.phonebili.phoneWidth+"px;height: "+this.phonebili.phoneHeight+"px;";
      },
      getPhoneUl(){
        return "transform-origin:0 0;transform:scale("+this.phonebili.phoneUl+");";
      },
      changePhone(index){
        //debugger
        if(index == 1){
          if(this.phonebili.phoneval > 25){
            this.phonebili.phoneval = this.phonebili.phoneval - 25;
          }
        }else if(index == 2){
          if(this.phonebili.phoneval < 200){
            this.phonebili.phoneval = this.phonebili.phoneval + 25;
          }
        }
        this.phonebili.phoneUl = 0.5 * this.phonebili.phoneval*2 /100;
        this.phonebili.phoneWidth = 360 * this.phonebili.phoneval*2 /100;
        this.phonebili.phoneHeight = 640 * this.phonebili.phoneval*2 /100;
      },
      setBgStyle(PageBg){
//         debugger

        if (typeof(PageBg) == "undefined") {

          return
        }

        if (typeof(PageBg.backgroundImage) == "undefined") {

          return
        }

        if (PageBg.backgroundImage.length) {

          // var style = {};
          // style.background = "url(" + this.baseUrl + PageBg.backgroundImage + ");";
          // style.backgroundSize="cover";
          //width:80px;height:80px
          var style = "background: url(" + PageBg.backgroundImage + ") no-repeat top center / cover;";
          // var style1 = "background-size:cover;";

          // var s = style + style1;
          // debugger
          return style
        } else {

          return "background: " + PageBg.backgroundColor;
        }

      },

      setInsideStyle(OutCss, itemType){

        if (itemType == 3) {

          return
        }

        // debugger


        var styles = "";


        for (var item in OutCss) {

          var value = OutCss[item];

          if (item === "width") {


            // console.log(typeOf(value)+ "asdasdas")
            if (isNaN(value) == false) {

              styles += item + ":" + 100 + "%;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";

              styles += item + ":" + 100 + "%;";
              continue
            }

            styles += item + ":" + value + ";";
          }
          if (item === "height") {
            if (isNaN(value) == false) {

              styles += item + ":" + 100 + "%;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + 100 + "%;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "top") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "left") {
            if (isNaN(value)) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }

          styles += item + ":" + value + ";";
        }
        // console.log(styles)
        return styles;

      },

      setOutStyle(OutCss, itemType){
        if (itemType == 3) {
          return
        }
        var styles = "";
        for (var item in OutCss) {
          var value = OutCss[item];
          if (item === "width") {
            if (isNaN(value) == false) {
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "height") {
            if (isNaN(value) == false) {
              if (value == 1 && itemType == 2) {
                styles += item + ":" + 150 + "px;";
              } else {
                styles += item + ":" + value + "px;";
              }
              continue
            }
            styles += item + ":" + value + ";";
          }

          if (item === "top") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            }
            styles += item + ":" + value + ";";
          }
          if (item === "left") {
            if (isNaN(value) == false) {
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "backgroundColor") {
            if (item == "") {
              styles += item + ":" + "rgb(0,0,0)";
              continue
            }
            styles += item + ":" + value + ";";
          }
//          if (item === "color" && itemType === "interActionButton") {
//            styles += item + ":#ffffff;";
//            continue
//          }

          styles += item + ":" + value + ";";
        }
//         console.log(styles)
        return styles;
      },

      //子元素宽高100%
      setOutStyle1(OutCss, itemType){
        if (itemType == 3) {
          return
        }
        var styles = "";
        for (var item in OutCss) {
          var value = OutCss[item];
          if (item === "width") {
//            if (isNaN(value) == false) {
//
//              styles += item + ":100%;";
//
//            }

            styles += item + ":100%;";
            continue;
          }
          if (item === "height") {
//            if (isNaN(value) == false) {
//                styles += item + ":100%;";
//            }
            styles += item + ":100%;";
            continue;
          }
          if (item === "top") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            }
            styles += item + ":" + value + ";";
          }
          if (item === "left") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            }
            styles += item + ":" + value + ";";
          }
          styles += item + ":" + value + ";";
        }
        return styles;
      },

      setNewAni(anim){


        if (anim.length == 0) {
          // debugger
          return;
        }
        // debugger
        var a = this.animationUtil(anim);

        // console.log('ani' + a);
        return a;
      },

      getContent(data){
        if (data != undefined) {
          var reTag = /<(?:.|\s)*?>/g;
          var data2 = this.html_decode(data);
//          var str1 = data2.replace(/\<div>/g, '</br>');
//          var str2 = str1.replace(/\<\/div>/g, '');
//            console.log(str2)
          return data2;
        }
      },

      //撤销
      undo(){
        if (this.testIndex >= this.$store.state.historyList.length - 1) {

          return;
        }
        this.testIndex += 1
        var index = this.$store.state.historyList.length - 1 - this.testIndex;
//        console.log(this.testIndex)
//        console.log(index)
//        index=index-1;
        if (index <= -1) {
          return;
        }
        //0 -> 1 ->2 ->3

        var params = this.$store.state.historyList[index]
        params = JSON.parse(params)
        this.$store.dispatch('updateCurrentdata', params)

      },

      redo(){

        if (this.testIndex == 0) {

          return;
        }
        var index = this.$store.state.historyList.length - this.testIndex;

        this.testIndex -= 1
//        console.log(this.testIndex)
//        console.log(index)
        var params = this.$store.state.historyList[index]
        params = JSON.parse(params)
        this.$store.dispatch('updateCurrentdata', params)

      },
      //刷新
      reload(){

        this.$store.dispatch("reload")
      },
      //网格
      changeBgGridStatus(){

        this.bgGridStatus = !this.bgGridStatus
        //debugger
        this.$emit('change-status', this.bgGridStatus)
      },
      html_decodes(str){
        var tt;
        for (var i = 0; i < str.length; i++) {
          tt = str.replace(/&nbsp;/g, "");
        }
        return tt;
      },
      html_decode(str){
        if (str != undefined) {
          return Util.htmlDecode(str);
        }
      },
      html_encode(str){
        if (str != undefined) {
          return Util.htmlEncode(str);
        }
      },
      itemClick(itemType){
        var params = {};
        params.isChangePic = false;
        switch (itemType) {
          //文字
          case 25:
            params.index = 1;
            this.$store.dispatch('changeRightTab', params)
            break;
          //图片
          case 4:
            params.index = 2;
            // debugger
            this.$store.dispatch('changeRightTab', params)
            break;
          case 'phoneCallButton':
            //电话
            params.index = 73;
            this.$store.dispatch('changeRightTab', params)
            break;
          case 'linkButton':
            //网址
            params.index = 73;
            this.$store.dispatch('changeRightTab', params)
            break;
          case 'countDown':
            //倒计时
            // debugger
            params.index = 73;
            this.$store.dispatch('changeRightTab', params)

            break;
          case 'interActionButton':
            //倒计时
            // debugger
            params.index = 73;
            this.$store.dispatch('changeRightTab', params)

            break;
          case 'i':
            params.index = 61;
            this.$store.dispatch('changeRightTab', params)
            break;
          case 's':
            params.index = 61;
            this.$store.dispatch('changeRightTab', params)
            break;
          case 'h':
            params.index = 4;
            this.$store.dispatch('changeRightTab', params)
            break;
          case 'm':
            this.showmap = true;
            break;
          // this.$store.dispatch('changeRightTab',20)
        }
      },

      ButtonClick() {
        //				this.$store.dispatch('delItem')
        //				this.Del()

      },
      setNumber(item){

        return "tel:" + item.in.properties.number;
      },
      selectItemOp(index, item, ev) {
        // $('.j_screen li').find('.content>div').attr('contenteditable', false)
        if (item.type === "3") {

          return
        }
        // 防止多选移动的时候触发选中元素
        if (this.checkedItems.length > 1 && !ev.shiftKey && !ev.ctrlKey) {
          return;
        }
        if (ev.shiftKey || ev.ctrlKey) {
          //					this.selectItem(index, true);
          this.$store.dispatch('selectItem', index, true)
        } else {
          //					this.selectItem(index);
          this.$store.dispatch('selectItem', index)
        }
      },
      selectItem(index) {

      },
      setAStyle(item) {
        var styles = "";

        var cssObj = item.css;


        if (item.type === 8) {

          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "textAlign") {
              // delete value;
              continue;
            }
            if (item === "width") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value + "px;";
              continue;
            }
            styles += item + ':' + value + ';'
          }
        } else {
          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "width") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            styles += item + ':' + value + ';'
          }
        }

        return styles;

      },
      setStyle1(item) {
        var styles = "";

        var cssObj = item.css;


        if (item.type == 8) {

          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "textAlign") {
              // delete value;
              continue;
            }
            if (item === "width") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value + "px;";
              continue;
            }

            styles += item + ':' + value + ';'
          }
        }
        if (item.type == 3) {

          // debugger


        } else {
          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "width") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value + "px;";
              continue;
            }

            styles += item + ':' + value + ';'
          }
        }

        return styles;

      },
      setStyle2(data) {
        // debugger
        var styles = "";
        //				if(!isNaN(data.width)) {
        for (var item in data) {
          if (item === "width") {
            styles += "width:100%;";
            continue;
          }
          if (item === "height") {
            styles += "height:100%;";
            continue;
          }
          if (item === "top") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          if (item === "left") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          if (item === "borderStyle" || item === "borderColor") {
            styles += item + ':' + data[item] + ';'
            continue;
          }
          if (item === "borderRadius" || item === "borderWidth") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          if (item === "transform") {
            continue;
          }
          styles += item + ':' + data[item] + ';'
        }
        // console.log(styles);
        return styles;

      },
      setDivStyle(data) {
        if (!isNaN(data.width)) {
          data.width = data.width + "px"
          data.height = data.height + "px"
        }
        //				data.overflow = "hidden"
        return data;

      },
      setImageStyle(datas) {
        var styles = "";
        for (var item in datas) {
          if (item === "top") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "left") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "width") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "height") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "borderWidth") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "transform") {
            continue;
          }
          styles += item + ':' + datas[item] + ';'
        }

        // debugger
        return styles;

      },

      setBothStyle(datas, data) {
        var a = this.setStyle2(datas);
        var b = this.animationUtil(data);

        //				var resultStr = '';
        //				for(var item in a) {
        //
        //					resultStr += item + ':' + a[item] + ';'
        //				}

        return a + b;

      },
      setType8Style(datas, data) {
        var resultStr = '';
        for (var item in datas) {
          resultStr += item + ':' + datas[item] + ';'
        }
//        console.log(resultStr)
        var b = this.animationUtil(data);
        return resultStr + b;

      },
      animationUtil(data) {
        var str = "";
        var anim = data;
        if (anim) {

          for (var i = 0; i < anim.length; i++) {
            // var animationType = Util.getAnimationType(anim[i].type, anim[i].direction);
            var animationType = anim[i].type;
            var animationDuration = anim[i].duration;
            var animationDelay = anim[i].delay;
            var animationCount = anim[i].count == -1 ? "infinite" : anim[i].count;
            var animationDirection = i == 0 ? "both running" : "normal";
            var dot1 = i == 0 ? "animation:" : ",";
            //						str += dot1 + animationType + " " + animationDuration + "s " + anim[i].linear + animationDelay + "s " + animationCount + " " + animationDirection;
            str += dot1 + animationType + " " + animationDuration + "s " + animationDelay + "s " + animationCount + " " + animationDirection;
          }
        }
        return str;

      },
      loadSvg(a, index) {
        // debugger
        //http://www.w3.org/2000/svg

        var self = this;

        // console.log($('.j_screen li').find('.svg').length)

        $(document).ready(function () {

          var eqxiuSvg = {
            NAMESPACE: "http://www.w3.org/2000/svg",
          }
          var b, c;
          // console.log(self.svgCount >= $('.j_screen li').find('.svg').length)

          if ($('.svg2_' + index).attr('data-flag') == 1) {
//            console.log(index+ 'INDEXreturn')
            return

          } else {
            $('.svg2_' + index).attr('data-flag', 1);
            //debugger
            if (a.src) {
              var _self = this;
              var id = $('.svg2_' + index);
              // console.log(id)
              b = document.createElementNS(eqxiuSvg.NAMESPACE, "svg");
              b.setAttribute("class", "element svg-element");
              // _self.svgCount ++

              $.ajax({
                type: 'GET',
                url: a.src,
                //url:'http://www.mywmonline.com/index/index/aa',
                dataType: "xml",
                success: function (c) {
                  var d = c.getElementsByTagName("svg"),
                    e = parseFloat($(d).attr("width") == undefined ? '100%' : $(d).attr("width")),
                    f = parseFloat($(d).attr("height") == undefined ? '100%' : $(d).attr("width")),
                    g = $(d).find("[fill], [style*='fill']"),
                    h = a.in.properties ? a.in.properties : {};
                    //debugger
                  var viewBox = $(d).attr("viewBox");
                  if (a.in.properties.colors) {
                    if ($(d).find("path").length > 1 || $(d).find("rect").length > 1) {
                      for (var i = 0; i < $(d).find("path").length; i++) {
                          var flags="color"+i;
                        $($(d).children(i)[i]).attr('fill', h.colors[flags]);
                      }
                      // for (var i = 0; i < $(d).find("path").length; i++) {
                      //   $(d).find("[fill], [style*='fill']").attr('fill', h.colors['color' + i])
                      // }
                    } else {
                      if (h.colors['color0']) {
                        $(d).find("[fill], [style*='fill']").attr("fill", h.colors['color0']);
                      } else {
                        $(d).find("[fill], [style*='fill']").attr("fill", h.colors['color1']);
                      }
                    }
                  }
                  a.in.properties = h;
                  var viewBoxVal = viewBox =='undefined' ? "0 0 " + e + " " + f : viewBox;
                  b = d[0];
                  b.setAttribute("viewBox", viewBoxVal);
                  b.setAttribute("preserveAspectRatio", "none");
                  b.setAttribute("width", "100%");
                  b.setAttribute("height", "100%");
                  b.setAttribute("style", "position:absolute");
                  b.id = 'svg2_' + index;
                  b.setAttribute("class", "element svg-element");
                  $(id).empty().append(b);
                }
              });
            }
          }

        });
      },
      // 获取光标位置
      getCursortPosition (textDom) {
        var cursorPos = 0;
        if (document.selection) {
          // IE Support
          textDom.focus();
          var selectRange = document.selection.createRange();
          selectRange.moveStart('character', -textDom.value.length);
          cursorPos = selectRange.text.length;
        } else if (textDom.selectionStart || textDom.selectionStart == '0') {
          // Firefox support
          cursorPos = textDom.selectionStart;
        }
        return cursorPos;
      },
      // 设置光标位置
      setCaretPosition(textDom, pos){
        if (textDom.setSelectionRange) {
          // IE Support
          textDom.focus();
          textDom.setSelectionRange(pos, pos);
        } else if (textDom.createTextRange) {
          // Firefox support
          var range = textDom.createTextRange();
          range.collapse(true);
          range.moveEnd('character', pos);
          range.moveStart('character', pos);
          range.select();
        }
      },
      closeMap(){
        this.showmap = false;
      }
    },
    mounted: function () {
      var self = this;
      // $(document).bind('mousedown', function (ev){


      //   var obj = $(ev.currentTarget);
      //   debugger
      //   console.log(obj)
      //  // console.log($(obj).find("[fill], [style*='fill']").length)
      // });


      // 点击其它地方隐藏元素属性
      $(document).bind('click', function (ev) {

        //
        var obj = $(ev.target);
        // console.log(self.checkedItemData)
        // $('.j_screen li').find('.content>div').attr('contenteditable', false)

        // console.log($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable'))

        //           if($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') == true){
        //               return
        //           }else{
//                $('.j_screen li').find('.content>div').attr('contenteditable', false)
        //           }
        if (self.checkedItems[0] != 'undefined') {
          var currentCheck = self.checkedItems[0];
          var oldCheck = self.itemIndex;
          if (currentCheck != oldCheck) {
            $('.j_screen li').find('.content>div').attr('contenteditable', false)
          }
          if (typeof(self.checkedItemData) != "undefined") {


            if (self.checkedItemData.type == 'h') {
              var colors = [];

//              console.log($(obj).parent("svg").attr('id') + 'id' )
//              console.log(self.checkedItems[0] + "_" + self.currentPage)
              $(obj).parent().find("[fill], [style*='fill']").each(function () {

                colors.push($(this).attr('fill'))

              });

              // debugger

              if ($(obj).parent().attr('id')) {
                var params = {};
                params.colors = colors;
                params.id = self.checkedItems[0] + "_" + self.currentPage;
                // debugger
                self.$store.dispatch('initSvgColorList', params)
              }
            }
          }
          if (obj.parents('.j_screen').length === 0) {
            // debugger

            if (obj.parents('.rightbody').length) {

            } else {

              if (obj.hasClass('delanimbtn')) {


              } else if (obj.parents('.text').length !== 0) {

              } else {
//              self.$store.dispatch('clearCheckedItems')
                if (obj.hasClass('rightbody') || obj.parents('.context_menu').length != 0) {

                } else {

                  self.$store.dispatch('clearCheckedItems')
                }
              }
            }
          }
        }
      });
      //改变大小
      $('body').on('mousedown', '.edit_mode', function (ev) {
        var target = $(this).closest('.item_wrapper')[0];

        var img = $(target).find('img');
        var imgwidth = $(img).width();
        var imgheight = $(img).height();
        var margintop = $(img).css("marginTop");

        var conWidth = parseFloat($('.j_screen').css('width'));
        var conHeight = parseFloat($('.j_screen').css('height'));

        var preClientX = ev.clientX;
        var preClientY = ev.clientY;

        var itemWidth = parseFloat($(target).width());
        var itemHeight = parseFloat($(target).height());
        // console.log("itemHeight" + itemHeight)
        var itemLeft = itemLeft ? itemLeft : parseFloat($(target).css('left'));
        var itemTop = itemTop ? itemTop : parseFloat($(target).css('top'));

        var btnIndex = $(this).index();

        $(window).bind('mousemove', function (ev) {
          //debugger
          //console.log(this.phonebili.phoneval+'99999999999')

          var difX = (ev.clientX - preClientX) * 2;
          var difY = (ev.clientY - preClientY) * 2;
          var styleParams = {};
          switch (btnIndex) {
            case 0:
//              console.log(0);
              if ((itemWidth - difX) > 3 && (itemHeight - difY) > 3) {
                if (ev.shiftKey) {
                  styleParams = {
                    width: (itemWidth - difX) + 'px',
                    height: (itemHeight / itemWidth * (itemWidth - difX)) + 'px',
                    left: (itemLeft + difX) + 'px',
                    top: (itemTop + itemHeight / itemWidth * difX) + 'px'
                  };
                } else {
                  styleParams = {
                    width: (itemWidth - difX) + 'px',
                    height: (itemHeight - difY) + 'px',
                    left: (itemLeft + difX) + 'px',
                    top: (itemTop + difY) + 'px'
                  };
                }
              }
              break;
            case 1:
//              console.log(1);
              if ((itemHeight - difY) > 3) {
                styleParams = {
                  height: (itemHeight - difY) + 'px',
                  top: (itemTop + difY) + 'px'
                };
              }
              break;
            case 2:
//              console.log(2);
              if ((itemWidth - difX) > 3 && (itemHeight - difY) > 3) {
                if (ev.shiftKey) {
                  styleParams = {
                    width: (itemWidth + difX) + 'px',
                    height: (itemHeight / itemWidth * (itemWidth + difX)) + 'px',
                    top: (itemTop - (itemHeight / itemWidth * difX)) + 'px'
                  };
                } else {
                  styleParams = {
                    width: (itemWidth + difX) + 'px',
                    height: (itemHeight - difY) + 'px',
                    top: (itemTop + difY) + 'px'
                  };
                }
              }
              break;
            case 3:
//              console.log(3);
              if ((itemWidth - difX) > 3) {
                styleParams = {
                  width: (itemWidth + difX) + 'px'
                }
              }
              break;
            case 4:
//              console.log(4);
              if ((itemWidth - difX) > 3 && (itemHeight - difY) > 3) {
                if (ev.shiftKey) {
                  styleParams = {
                    width: (itemWidth + difX) + 'px',
                    height: (itemHeight / itemWidth * (itemWidth + difX)) + 'px'
                  };
                } else {
                  styleParams = {
                    width: (itemWidth + difX) + 'px',
                    height: (itemHeight + difY) + 'px',

                  };
                }
              }
              break;
            case 5:
//              console.log(5);
              if ((itemHeight - difY) > 3) {
                styleParams = {
                  height: (itemHeight + difY) + 'px'
                };
              }
              break;
            case 6:
//              console.log(6);
              if ((itemWidth - difX) > 3 && (itemHeight - difY) > 3) {
                if (ev.shiftKey) {
                  styleParams = {
                    width: (itemWidth - difX) + 'px',
                    height: (itemHeight / itemWidth * (itemWidth - difX)) + 'px',
                    left: (itemLeft + difX) + 'px'
                  };
                } else {
                  styleParams = {
                    width: (itemWidth - difX) + 'px',
                    height: (itemHeight + difY) + 'px',
                    left: (itemLeft + difX) + 'px'
                  };
                }
              }
              break;
            case 7:
//              console.log(7);
              if ((itemWidth - difX) > 3) {
                styleParams = {
                  width: (itemWidth - difX) + 'px',
                  left: (itemLeft + difX) + 'px'
                };
              }
              break;
          }
          var params = {};
          params.index = self.checkedItems[0];
          params.move = false;
          params.params = styleParams;
          params.params['difY'] = difY;
          params.params['difX'] = difX;
          // params.params['imgwidth'] = imgwidth;
          // params.params['imgheight'] = imgheight;
          params.params['margintop'] = margintop;
          //					self.setStyle(self.checkedItems[0], styleParams);
          //console.log(params.params+"params")
          self.$store.dispatch('setStyle', params)

        });
        $(window).bind('mouseup', function () {
          $(window).unbind('mousemove');
          $(window).unbind('mouseup');
          self.$store.dispatch('pushHistory')
        });
      });
      // 右键菜单
      var eleId = '#item_context_menu';
      $(window).bind('click', function (ev) {
        var obj = $(ev.target);
        if (obj.parents(eleId).length === 0) {
          $(eleId).fadeOut('fast');
        }
      })
      $('.phone_screen').on('contextmenu', '.item_wrapper', function (ev) {
        ev.preventDefault();
//        var lis=$('.j_screen ul li');
//        var items=lis[self.checkedItems[0]];
//        var ddd=items.css('top');
//        var toppx=$(items).css('top');
//        var tops=parseInt(toppx.replace(/px/g,""));
//        console.log(tops)
//        debugger
//        console.log(ddd)
        var obj = $(eleId);
        var clientX = ev.clientX;
        var clientY = ev.clientY;
        if (clientY > 420) {
          clientY = 420;
          obj.css({
            position: 'fixed',
            left: clientX + 10 + 'px',
            bottom: clientY + 'px',
            display: 'block'
          });
        } else {
          obj.css({
            position: 'fixed',
            left: clientX + 10 + 'px',
            top: clientY + 10 + 'px',
            display: 'block'
          });
        }


//         $(eleId).bind('mouseleave', function () {
//           $(eleId).fadeOut('fast');
//         });
        $(eleId).bind('click', function () {
          $(eleId).fadeOut('fast');
        });
        return false;
      });
      //拖拽
      $('body').on('mousedown', '.j_screen li .content', function (ev) {
        //console.log("mousemove1")

        // debugger
        if ($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') === 'true') {
          return;
        }
        var conWidth = parseFloat($('.j_screen').css('width'));
        var conHeight = parseFloat($('.j_screen').css('height'));

        var preClientX = ev.clientX;
        var preClientY = ev.clientY;

        var itemLeft = {},
          itemTop = {};
        var bilival = 2/(self.phonebili.phoneUl/0.5);
        //debugger
        $(window).bind('mousemove', function (ev) {
          for (var i = 0; i < self.checkedItems.length; i++) {
            var fff = $('.j_screen').children();
            var obj = $('.j_screen').children().children().eq(self.checkedItems[0]);
            var ojbj = obj.find('img');

            itemLeft[0] = itemLeft[0] ? itemLeft[0] : (isNaN(parseFloat(obj.css('left'))) ? 0 : parseFloat(obj.css('left')));
            itemTop[0] = itemTop[0] ? itemTop[0] : (isNaN(parseFloat(obj.css('top'))) ? 0 : parseFloat(obj.css('top')));
            //console.log($("#phonebiliPhoneval").data('bili'));
            var difX = (ev.clientX - preClientX)*bilival ;
            var difY = (ev.clientY - preClientY)*bilival ;
            console.log(ev.clientX+'---------'+preClientX+'+++++++++');
            console.log(bilival+'---------'+difX+'difX____________');
            var x = difX + itemLeft[0];
            var y = difY + itemTop[0];


            var alertMsg = {
              show: true,
              msg: '超出屏幕外的元素将不可见',
              type: 'warning'
            }

            if (x < 0 || y < 0 || parseFloat(obj.outerWidth()) + parseFloat(obj.css('left')) > conWidth || parseFloat(obj.outerHeight()) + parseFloat(obj.css('top')) > conHeight) {
              if (!self.alertObj.show) {
                //								self.alert(alertMsg);
                self.$store.dispatch('alert', alertMsg)
              }
            }
            var params = {};
            params.index = self.checkedItems[0];
            params.move = true;
            params.params = {
              left: x + 'px',
              top: y + 'px'
            }
            self.$store.dispatch('setStyle', params)
          }
          return false;
        });
        $(window).bind('mouseup', function () {


          self.$store.dispatch('pushHistory')
          //console.log("mouseup")
          $(window).unbind('mousemove');
          $(window).unbind('mouseup');
        });
      });
      //键盘响应
      var moveItem = function (direction) {
        for (var i = 0; i < self.checkedItems.length; i++) {
          var obj = $('.j_screen').children().children().eq(self.checkedItems[i]);
          var objLeft = parseFloat(obj.css('left'));
          var objTop = parseFloat(obj.css('top'));

          // debugger

//          console.log('eas' + obj.css('left'))
          var cssObj = {};
          var params = {};
          switch (direction) {
            case 'top':
              params.params = {
                top: objTop - 1 + 'px',
                'isSc': false
              }
              break;
            case 'right':
              params.params = {
                left: objLeft + 1 + 'px',
                'isSc': false
              }
              break;
            case 'left':
              params.params = {
                left: objLeft - 1 + 'px',
                'isSc': false
              }
              break;
            case 'down':
              params.params = {
                top: objTop + 1 + 'px',
                'isSc': false
              }
              break;
          }
          //					self.setStyle(self.checkedItems[i], cssObj)
          params.index = self.checkedItems[i]
          params.move = true;
          self.$store.dispatch('setStyle', params)

        }
      };
      $(window).keydown(function (ev) {
        var $target = $(this);
        var keyCode = event.keyCode;
        var ctrlKey = event.ctrlKey;
        var metaKey = event.metaKey

        if (ctrlKey || metaKey) {

          if (keyCode == 67) {

            self.$store.dispatch('copySelectItem');
          }
          if (keyCode == 86) {
            var length1 = $('.j_screen li').length
            var able = false;
            for (var i = 0; i < length1; i++) {
              if ($('.j_screen li').eq(i).find('.content>div').attr('contenteditable') === 'true') {
                able = true;
//                var html = $('.j_screen li').eq(i).find('.content>div:last');
//                html=html.replace(/<[^>]+>/g, "");//去掉所有的html标记
              }
            }
            if (able) {
            } else {
              self.$store.dispatch('pasteItem');
            }
          }
        }
      });
      $(window).keyup(function (ev) {
        // console.log($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').text())
        var obj = $(ev.target);
        obj.parents('.rightbody').length
        if (obj.parents('.rightbody').length) {
          return;
        }
        var preventKeyboard = !self.checkedItems.length || $('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') == 'true';
//        if (preventKeyboard) {
//          return;
//        }
        var keyCode = event.keyCode;
        // console.log($('.j_screen li').find('.content>div').attr('contenteditable', false))
        if (keyCode === 38) { // 上
          if (!preventKeyboard) {
            moveItem('top');
          }
          return false;
        } else if (keyCode === 40) { // 下
          if (!preventKeyboard) {
            moveItem('down');
          }
          return false;
        } else if (keyCode === 37) { // 左
          if (!preventKeyboard) {
            moveItem('left');
          }
          return false;
        } else if (keyCode === 39) { // 右
          if (!preventKeyboard) {
            moveItem('right');
          }
          return false;
        } else if ((keyCode === 8 || keyCode === 46)) { // 删除
          if ($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') === 'true') {
//             console.log($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').text())

//            var params = {};
//            params.itemIndex = self.itemIndex;
//            params.textValue = $('.j_screen li').eq(self.checkedItems[0]).find('.content>div').html();
//            self.cursorPosition = self.getCursortPosition(params.textValue);
//            self.setCaretPosition(params.textValue,self.cursorPosition)
//            console.log("start:"+self.cursorPosition)
//
////            params.textValue = self.html_decode(params.textValue);
//            self.$store.dispatch('changeText', params)
            return true;

          } else {
            self.$store.dispatch('pushHistory')
//              console.log(self.currentPageData[self.checkedItems[0]]);
            if (self.checkedItemData.type == "i" || self.checkedItemData.type == "s") {
              self.showModal = true;
            } else {
              self.$store.dispatch('delItem')
            }
            return false;
          }
        } else if (keyCode === 32) {//空格  制表符：&#9;
//          if ($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') === 'true') {
//            var html = $('.j_screen li').eq(self.checkedItems[0]).find('.content>div').html();
//            //var position = self.getCursortPosition(html);
//            //var substrings = html.substring(position, html.length);
//            html = "&nbsp;"+html;
//          }
//        }else if(keyCode===9){//制表符
//          if ($('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable') === 'true') {
//            console.log(keyCode)
//          }
        } else if (keyCode === 91) { // 复制
//          console.log('copy');
          // debugger

          return false;
        } else if ((event.ctrlKey || event.metaKey) && keyCode === 86) { // 粘贴
//          console.log('paste');
          return false;
        } else if ((event.ctrlKey || event.metaKey) && keyCode === 65) { // 全选
//          console.log('selectall');
          return false;
        }
      });
      // $('body').on('click', '.item_wrapper', function() {
      //   var itemIndex = self.checkedItems[0];
      //   var checkObj=$('.j_screen li').eq(self.checkedItems[0]);
      //   var allElement=$('.j_screen li');
      //   var sexList=$.grep(allElement,function(checkObj,i){
      //     return i!=itemIndex;
      //   });
      //   $('.j_screen li').find('.content>div').attr('contenteditable', false);
      // });
      //编辑
      $('body').on('dblclick', '.item_wrapper', function () {
        var $target = $(this);
        self.itemIndex = self.checkedItems[0];
        if ($target.attr('type') === '2' || $target.attr('type') === '5' || $target.attr('type') == "countDown") {

          // return;
          $('.j_screen li').find('.content>div').attr('contenteditable', false)
          $('.j_screen li').eq(self.checkedItems[0]).find('.content>div').attr('contenteditable', true)
          $target.css('cursor', 'auto');

          //******
          // debugger

          // $target.find('.content>div').popline({
          // 	position: 'fixed'
          // });
          var obj = $target.find('.content>div')[0];
          window.getSelection().selectAllChildren(obj);
//          obj.select();
//          self.keepLastIndex(obj)
          $target.find('.content>div').bind('blur', function () {
            var html = $target.find('.content>div').html();
//
//            html = html.replace(/<[^>]+>/g, "");//去掉所有的html标记
            html = html.replace(/(?!<div.+?>)(?!<br.+?>)<[^>]+>/g, "");//去掉不是div的所有的html标记
//            debugger
//            self.cursorPosition = self.getCursortPosition(html);
            // 修改数据|还原状态
            //					self.changeText(html, itemIndex);
            // console.log('++++++=')
            obj = {};
            obj.itemIndex = self.itemIndex;
            obj.textValue = html;
            self.$store.dispatch('changeText', obj)
//            $target.find('.content>div').popline("destroy");
            $target.css('cursor', 'pointer');
            $target.find('.content>div').attr('contenteditable', false);
            $target.find('.content>div').unbind('blur');
          });
        }
      })

    }
  }
</script>

<style>
  .phone_div{
     position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #eee;
  }
  .phone_bili{height: 36px;position: fixed;bottom: 50px;right: 30%;z-index: 1000;border-radius: 18px;overflow: hidden;}
  .phone_bili .phone_subbar1{float: left;cursor: pointer;height: 100%;width: 40px;position: relative;background: url(../assets/images/psub5.png) center no-repeat #51555c;}
  .phone_bili .min_wrap{float: left;cursor: pointer;height: 100%;width: 40px;background-color: #51555c;position: relative;}
  .phone_bili .min_wrap span{background-color: #fff;height: 2px;width: 10px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
  .phone_bili .num_wrap{float: left;font-size: 14px;color: #fff;width: 50px;text-align: center;line-height: 36px;cursor: pointer;height: 100%;width: 40px;background-color: #51555c;position: relative;}
  .phone_bili .add_wrap{float: left;cursor: pointer;height: 100%;width: 40px;background-color: #51555c;position: relative;}
  .phone_bili .add_wrap span:first-child{height: 2px;width: 10px;position: absolute;top: 50%;
    left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);    background-color: #fff;}
  .phone_bili .add_wrap span:last-child{height: 10px;width: 2px;position: absolute;top: 50%;
    left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);    background-color: #fff;}
  .phone_con {
    position: absolute;
    margin-left: -180px;
    top: 90px;
    left: 50%;
  }

  .phone_con .phone_screen::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px dashed #000;
  }

  .phone_con .phone_title {
    position: absolute;
    top: 60px;
    width: 80%;
    left: 10%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 30px;
    height: 30px;
    font-size: 18px;
  }

  .phone_con .phone_screen {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none;
  }

  .phone_con .phone_screen > div {
    cursor: pointer;
  }

  .phone_con .phone_screen > div .content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .content {
    overflow: hidden;
  }

  .content p,
  .content h1,
  .content h2,
  .content h3,
  .content h4,
  .content h5,
  .content h6 {
    display: inline;
    font-weight: normal;
  }

  .content h1 {
    font-size: 2em;
  }

  .content h2 {
    font-size: 1.5em;
  }

  .content h3 {
    font-size: 1.17em;
  }

  .content h4 {
    font-size: 1em;
  }

  .content h5 {
    font-size: 0.83em;
  }

  .content h6 {
    font-size: 0.67em;
  }

  .edit_mode_cont {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: -1;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 2px dashed #000;
  }

  .edit_mode_layer {
    position: relative;
    z-index: 800;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
  }

  .edit_mode_layer > div {
    position: absolute;
    width: 25px;
    height: 25px;
    background: #fff;
    border: 2px solid #1abd9b;
    z-index: 888;
    box-sizing: border-box;
  }

  .edit_mode_radius_t_l {
    cursor: nw-resize;
    left: -13px;
    top: -19px;
    border-radius: 50%;
  }

  .edit_mode_radius_t_m {
    cursor: n-resize;
    left: 50%;
    margin-left: -6px;
    top: -20px;
  }

  .edit_mode_radius_t_r {
    cursor: ne-resize;
    right: -20px;
    top: -19px;
    border-radius: 50%;
  }

  .edit_mode_radius_m_r {
    cursor: e-resize;
    top: 50%;
    margin-top: -6px;
    right: -20px;
  }

  .edit_mode_radius_b_r {
    cursor: se-resize;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
  }

  .edit_mode_radius_b_m {
    cursor: s-resize;
    left: 50%;
    margin-left: -6px;
    bottom: -20px;
  }

  .edit_mode_radius_b_l {
    cursor: sw-resize;
    bottom: -20px;
    left: -15px;
    border-radius: 50%;
  }

  .edit_mode_radius_m_l {
    cursor: e-resize;
    top: 50%;
    margin-top: -6px;
    left: -20px;
  }

  .phone_subbar {
    position: absolute;
    right: -40px;
    top: 200px
  }

  .phone_subbar li {
    width: 40px;
    height: 40px;
  }

  .phone_subbar li:nth-child(1) {
    background: url(../assets/images/psub1.png) center no-repeat rgba(60, 60, 60, 0.5);
  }

  .phone_subbar li:nth-child(2) {
    background: url(../assets/images/psub2.png) center no-repeat rgba(60, 60, 60, 0.5);
  }

  .phone_subbar li:nth-child(3) {
    background: url(../assets/images/psub3.png) center no-repeat rgba(60, 60, 60, 0.5);
  }

  /*.phone_subbar li:nth-child(4) {*/
  /*background: url(../assets/images/psub4.png) center no-repeat rgba(60, 60, 60, 0.5);*/
  /*}*/

  .phone_subbar li:nth-child(4) {
    background: url(../assets/images/psub5.png) center no-repeat rgba(60, 60, 60, 0.5);
  }

  .phone_subbar li:nth-child(1):hover {
    background: url(../assets/images/psub1.png) center no-repeat rgba(60, 60, 60, 1);
  }

  .phone_subbar li:nth-child(2):hover {
    background: url(../assets/images/psub2.png) center no-repeat rgba(60, 60, 60, 1);
  }

  .phone_subbar li:nth-child(3):hover {
    background: url(../assets/images/psub3.png) center no-repeat rgba(60, 60, 60, 1);
  }

  /*.phone_subbar li:nth-child(4):hover {*/
  /*background: url(../assets/images/psub4.png) center no-repeat rgba(60, 60, 60, 1);*/
  /*}*/

  .phone_subbar li:nth-child(4):hover {
    background: url(../assets/images/psub5.png) center no-repeat rgba(60, 60, 60, 1);
  }

  .context_menu {
    z-index: 999;
  }

  .context_menu li {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    text-align: center;
    font-size: 14px;
    color: #696969;
  }

  .context_menu li:nth-child(1) {
    background: url(../assets/images/micon1.png) 20px center no-repeat #fff;
  }

  .context_menu li:nth-child(2) {
    background: url(../assets/images/micon2.png) 20px center no-repeat #fff;
  }

  .context_menu li:nth-child(3) {
    background: url(../assets/images/micon3.png) 20px center no-repeat #fff;
  }

  .context_menu li:nth-child(4) {
    background: url(../assets/images/micon4.png) 20px center no-repeat #fff;
  }

  .context_menu li:nth-child(5) {
    background: url(../assets/images/micon5.png) 20px center no-repeat #fff;
  }

  .context_menu li:nth-child(6) {
    background: url(../assets/images/micon6.png) 20px center no-repeat #fff;
  }

  .context_menu li:hover {
    color: #fff;
  }

  .context_menu li:nth-child(1):hover {
    background: url(../assets/images/amicon1.png) 20px center no-repeat #1abd9b;
  }

  .context_menu li:nth-child(2):hover {
    background: url(../assets/images/amicon2.png) 20px center no-repeat #1abd9b;
  }

  .context_menu li:nth-child(3):hover {
    background: url(../assets/images/amicon3.png) 20px center no-repeat #1abd9b;
  }

  .context_menu li:nth-child(4):hover {
    background: url(../assets/images/amicon4.png) 20px center no-repeat #1abd9b;
  }

  .context_menu li:nth-child(5):hover {
    background: url(../assets/images/amicon5.png) 20px center no-repeat #1abd9b;
  }

  .context_menu li:nth-child(6):hover {
    background: url(../assets/images/amicon6.png) 20px center no-repeat #1abd9b;
  }

  .zgwsj{width: 720px;height: 16px;background: url(../assets/images/zgwsj.png) no-repeat center;background-size: contain;bottom: -1270px;opacity: 1;filter: alpha(opacity=1);}
</style>
